import {Component} from '@angular/core';
import {Activity} from "../../entity/activity";
import {ActivityService} from "../../service/activity.service";
import {ToastOptions, ToastData, ToastyService} from "ng2-toasty";

@Component({
    moduleId: module.id,
    selector: 'my-back-hdtg',
    template: `<div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10" style="text-align: center">
                <form (ngSubmit)="onSubmit()" #activityForm="ngForm">
                    <div class="form-group row has-success">
                        <label for="title" class="col-xs-2 form-control-label">标题</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.title" required name="title" maxlength="11" class="form-control form-control-success" type="text" id="title" placeholder="请输入活动标题" placement="top" ngbTooltip="活动标题长度应在5到50个字符之间">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="content" class="col-xs-2 form-control-label">简介</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.content" required  name="content"  class="form-control form-control-success" type="text" id="content" placeholder="请输入活动简介" placement="top" ngbTooltip="活动简介长度应在10到255个字符之间">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="theme" class="col-xs-2 form-control-label">主题</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.theme" required  name="theme"  class="form-control form-control-success" type="text" id="theme" placeholder="请输入主题">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="activitiesAddress" class="col-xs-2 form-control-label">活动地址</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.activitiesAddress" required  name="activitiesAddress"  class="form-control form-control-success" type="text" id="activitiesAddress" placeholder="请输入活动地址">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="startTime" class="col-xs-2 form-control-label">开始时间</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.startTime" required  name="startTime"  class="form-control form-control-success" type="date" id="startTime" placeholder="请选择开始时间" placement="top">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="endTime" class="col-xs-2 form-control-label">结束时间</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.endTime" required  name="endTime"  class="form-control form-control-success" type="date" id="endTime" placeholder="请选择结束时间" placement="top">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row has-success">
                        <label for="deadline" class="col-xs-2 form-control-label">报名截止时间</label>
                        <div class="col-xs-10">
                            <input [(ngModel)]="activity.deadline" required  name="deadline"  class="form-control form-control-success" type="date" id="deadline" placeholder="请选择报名截止时间" placement="top">
                        </div>
                    </div>
                    <hr>
                    <ngb-alert type="success" [dismissible]="false">
                        确认活动信息无误后，点击下方“提交投稿”按钮提交投稿。
                    </ngb-alert>
                    <hr>
                    <button type="submit" [disabled]="!activityForm.form.valid" class="btn btn-primary">提交投稿</button>
                </form>
            </div>
            <div class="col-sm-1"></div>
        </div>`
})

export class BackItemActivityUploadComponent{

  constructor(private activityService:ActivityService, private toastyService:ToastyService){}

  activity = new Activity();

  onSubmit() {
    this.activityService.insertActivity(this.activity);
    const toastOptions:ToastOptions = {
      title: "提示信息",
      msg: "发布活动成功！",
      showClose: true,
      timeout: 3000,
      theme: 'bootstrap',
      onAdd: (toast:ToastData) => {},
      onRemove: function(toast:ToastData) {}
    };
    this.toastyService.success(toastOptions);
  }
}
